<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta content="order by dede58.com" name="author"/>
    <meta content="IE=edge" http-equiv="X-UA-Compatible">
    <meta content="width=device-width, initial-scale=1" name="viewport">
    <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
    <title>Float-Admin</title>

    <!-- Common plugins -->
    <link href="../../static/css/bootstrap.min.css" rel="stylesheet">
    <link href="../../static/css/simple-line-icons.css" rel="stylesheet">
    <link href="../../static/css/pace.css" rel="stylesheet">
    <link href="../../static/css/jasny-bootstrap.min.css" rel="stylesheet">
    <link href="../../static/css/font-awesome.min.css" rel="stylesheet">
    <link href="../../static/css/nanoscroller.css" rel="stylesheet">
    <link href="../../static/css/metismenu.min.css" rel="stylesheet">
    <!--template css-->
    <link href="../../static/css/style.css" rel="stylesheet">
    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="../../static/js/html5shiv.min.js"></script>
    <script src="../../static/js/respond.min.js"></script>
    <![endif]-->
</head>
<body>

<!--top bar start-->
<div class="top-bar light-top-bar"><!--by default top bar is dark, add .light-top-bar class to make it light-->
    <div class="container-fluid">
        <div class="row">
            <div class="col-xs-6">
                <a class="admin-logo" href="index.html">
                    <h1><img alt="" src="../../static/picture/logo-dark.png"></h1>
                </a>
                <div class="left-nav-toggle visible-xs visible-sm">
                    <a href="">
                        <i class="glyphicon glyphicon-menu-hamburger"></i>
                    </a>
                </div><!--end nav toggle icon-->
                <!--start search form-->
                <div class="search-form hidden-xs">
                    <form>
                        <input class="form-control" placeholder="Search for..." type="text">
                        <button class="btn-search" type="button"><i class="fa fa-search"></i></button>
                    </form>
                </div>
                <!--end search form-->
            </div>
            <div class="col-xs-6">
                <ul class="list-inline top-right-nav">
                    <li class="dropdown hidden-xs icon-dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="glyphicon glyphicon-envelope"></i>
                            <span class="badge badge-warning">4</span>
                        </a>
                        <ul class="dropdown-menu top-dropdown lg-dropdown notification-dropdown">
                            <li>
                                <div class="dropdown-header"><a class="pull-right text-muted" href="#"><small>View
                                    All</small></a> Messages
                                </div>
                                <div class="scrollDiv">

                                    <div class="notification-list">
                                        <a class="clearfix" href="javascript: void(0);">
                                                    <span class="notification-icon">
                                                        <img alt="" class="img-circle"
                                                             src="../../static/picture/avtar-2.jpg" width="50">
                                                    </span>
                                            <span class="notification-title">John Doe <label
                                                    class="label label-primary pull-right">Office</label></span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                        <a class="clearfix" href="javascript: void(0);">
                                                    <span class="notification-icon">
                                                        <img alt="" class="img-circle"
                                                             src="../../static/picture/avtar-3.jpg" width="50">
                                                    </span>
                                            <span class="notification-title">Emily Doe  <label
                                                    class="label label-info pull-right">Marketing</label></span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                        <a class="clearfix" href="javascript: void(0);">
                                                    <span class="notification-icon">
                                                        <img alt="" class="img-circle"
                                                             src="../../static/picture/avtar-4.jpg" width="50">
                                                    </span>
                                            <span class="notification-title">Michael Clark <label
                                                    class="label label-warning pull-right">Support</label> </span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                        <a class="clearfix" href="javascript: void(0);">
                                                    <span class="notification-icon">
                                                        <img alt="" class="img-circle"
                                                             src="../../static/picture/avtar-5.jpg" width="50">
                                                    </span>
                                            <span class="notification-title">Ronaldo <label
                                                    class="label label-success pull-right">Metting</label> </span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </li>
                    <li class="dropdown hidden-xs icon-dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <i class="glyphicon glyphicon-bell"></i>
                            <span class="badge badge-danger">6</span>
                        </a>
                        <ul class="dropdown-menu top-dropdown lg-dropdown notification-dropdown">
                            <li>
                                <div class="dropdown-header"><a class="pull-right text-muted" href="#"><small>View
                                    All</small></a> Notifications
                                </div>
                                <div class="scrollDiv">
                                    <div class="notification-list">
                                        <a class="clearfix" href="javascript: void(0);">
                                            <span class="notification-icon"><i
                                                    class="icon-cloud-upload text-primary"></i></span>
                                            <span class="notification-title">Upload Complete</span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                        <a class="clearfix" href="javascript: void(0);">
                                            <span class="notification-icon"><i
                                                    class="icon-info text-warning"></i></span>
                                            <span class="notification-title">Storage Space low</span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                        <a class="clearfix" href="javascript: void(0);">
                                            <span class="notification-icon"><i
                                                    class="icon-check text-success"></i></span>
                                            <span class="notification-title">Project Task Complete </span>
                                            <span class="notification-description">Praesent dictum nisl non est sagittis luctus.</span>
                                            <span class="notification-time">40 minutes ago</span>
                                        </a>
                                    </div>
                                </div>
                            </li>

                        </ul>
                    </li>
                    <li class="dropdown">
                        <a class="right-sidebar-toggle" href="javascript: void(0);"><i
                                class="glyphicon glyphicon-align-right"></i></a>
                    </li>
                    <li class="dropdown avtar-dropdown">
                        <a class="dropdown-toggle" data-toggle="dropdown" href="#">
                            <img alt="" class="img-circle" src="../../static/picture/avtar-1.jpg" width="30">

                        </a>
                        <ul class="dropdown-menu top-dropdown">
                            <li><a href="javascript: void(0);"><i class="icon-bell"></i> Activities</a></li>
                            <li><a href="javascript: void(0);"><i class="icon-user"></i> Profile</a></li>
                            <li><a href="javascript: void(0);"><i class="icon-settings"></i> Settings</a></li>
                            <li class="divider"></li>
                            <li><a href="javascript: void(0);"><i class="icon-logout"></i> Logout</a></li>
                        </ul>
                    </li>

                </ul>
            </div>
        </div>
    </div>
</div>
<!-- top bar end-->

<!--right side bar panel-->
<nav class="right_sidebar" id="right-sidebar-toggle">
    <div class="nano">
        <div class="nano-content">
            <div>
                <!-- Nav tabs -->
                <ul class="list-inline nav-tab-panel clearfix" role="tablist">
                    <li class="active" role="presentation"><a aria-controls="projects" data-toggle="tab"
                                                              href="#projects"
                                                              role="tab">Projects</a></li>
                    <li role="presentation"><a aria-controls="contacts" data-toggle="tab" href="#contacts" role="tab">Contacts</a>
                    </li>

                </ul>

                <!-- Tab panes -->
                <div class="tab-content">
                    <div class="tab-pane active" id="projects" role="tabpanel">
                        <ul class="sidebar-list">
                            <li class="sidebar-title">
                                <h3 class="font-100"> Current projects</h3>
                                <small>There are <strong>7</strong> Current project</small>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-primary pull-right">New</span>
                                    <h4>YII with material design</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 42%</div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar progress-bar-warning" style="width: 42%;"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-primary pull-right">New</span>
                                    <h4>HTML to AngularJs</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 12%</div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar progress-bar-danger" style="width: 12%;"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-success pull-right">Company</span>
                                    <h4>Website Re-design</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 84%</div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar progress-bar-success" style="width: 84%;"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-success pull-right">Metting</span>
                                    <h4>Business Consultancy</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 54%</div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar progress-bar-info" style="width: 54%;"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-primary pull-right">New</span>
                                    <h4>YII with material design</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 42%</div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar progress-bar-warning" style="width: 42%;"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                            <li>
                                <a href="#">
                                    <span class="label label-primary pull-right">New</span>
                                    <h4>HTML to AngularJs</h4>
                                    <p>
                                        It is a long established fact that a reader will be distracted.
                                    </p>

                                    <div class="small">Completion with: 12%</div>
                                    <div class="progress progress-mini">
                                        <div class="progress-bar progress-bar-danger" style="width: 12%;"></div>
                                    </div>
                                    <div class="small text-danger">Deadline - September 15, 2016</div>
                                </a>
                            </li>
                        </ul>
                    </div>
                    <div class="tab-pane" id="contacts" role="tabpanel">

                        <ul class="list-unstyled sidebar-contact-list">
                            <li class="clearfix">
                                <a class="media-box" href="#">
                                            <span class="pull-right">
                                                <span class="circle circle-success circle-lg"></span>
                                            </span>
                                    <span class="pull-left">
                                                <!-- Contact avatar-->
                                                <img alt="user" class="media-box-object img-circle"
                                                     src="../../static/picture/avtar-1.jpg" width="50">
                                            </span>
                                    <!-- Contact info-->
                                    <span class="media-box-body">
                                                <span class="media-box-heading">
                                                    <strong>Angelina</strong>
                                                    <br>
                                                    <small class="text-muted">Designer</small>
                                                </span>
                                            </span>
                                </a>
                            </li><!--li end-->
                            <li class="clearfix">
                                <a class="media-box" href="#">
                                            <span class="pull-right">
                                                <span class="circle circle-success circle-lg"></span>
                                            </span>
                                    <span class="pull-left">
                                                <!-- Contact avatar-->
                                                <img alt="user" class="media-box-object img-circle"
                                                     src="../../static/picture/avtar-2.jpg" width="50">
                                            </span>
                                    <!-- Contact info-->
                                    <span class="media-box-body">
                                                <span class="media-box-heading">
                                                    <strong>John doe</strong>
                                                    <br>
                                                    <small class="text-muted">Designer</small>
                                                </span>
                                            </span>
                                </a>
                            </li><!--li end-->
                            <li class="clearfix">
                                <a class="media-box" href="#">
                                            <span class="pull-right">
                                                <span class="circle circle-danger circle-lg"></span>
                                            </span>
                                    <span class="pull-left">
                                                <!-- Contact avatar-->
                                                <img alt="user" class="media-box-object img-circle"
                                                     src="../../static/picture/avtar-3.jpg" width="50">
                                            </span>
                                    <!-- Contact info-->
                                    <span class="media-box-body">
                                                <span class="media-box-heading">
                                                    <strong>Eluga Smith</strong>
                                                    <br>
                                                    <small class="text-muted">Designer</small>
                                                </span>
                                            </span>
                                </a>
                            </li><!--li end-->
                            <li class="clearfix">
                                <a class="media-box" href="#">
                                            <span class="pull-right">
                                                <span class="circle circle-lg"></span>
                                            </span>
                                    <span class="pull-left">
                                                <!-- Contact avatar-->
                                                <img alt="user" class="media-box-object img-circle"
                                                     src="../../static/picture/avtar-4.jpg" width="50">
                                            </span>
                                    <!-- Contact info-->
                                    <span class="media-box-body">
                                                <span class="media-box-heading">
                                                    <strong>Jonathan Doe</strong>
                                                    <br>
                                                    <small class="text-muted">Designer</small>
                                                </span>
                                            </span>
                                </a>
                            </li><!--li end-->
                            <li class="clearfix">
                                <a class="media-box" href="#">
                                            <span class="pull-right">
                                                <span class="circle circle-success circle-lg"></span>
                                            </span>
                                    <span class="pull-left">
                                                <!-- Contact avatar-->
                                                <img alt="user" class="media-box-object img-circle"
                                                     src="../../static/picture/avtar-5.jpg" width="50">
                                            </span>
                                    <!-- Contact info-->
                                    <span class="media-box-body">
                                                <span class="media-box-heading">
                                                    <strong>Angelina</strong>
                                                    <br>
                                                    <small class="text-muted">Designer</small>
                                                </span>
                                            </span>
                                </a>
                            </li><!--li end-->
                            <li>
                                <div class=" text-center">
                                    <!-- Optional link to list more users-->
                                    <a class="btn btn-teal" href="javascript:void(0);" title="See more contacts">
                                        Load more..
                                    </a>
                                </div>
                            </li>
                        </ul><!--end sidebar contacts-list-->
                    </div>
                </div>

            </div>
        </div>
    </div>
</nav>
<!--end right side bar panel-->


<!--left navigation start-->
<aside class="float-navigation light-navigation">
    <div class="nano">
        <div class="nano-content">
            <ul class="metisMenu nav" id="menu">
                <li class="nav-heading"><span>Main Navigation</span></li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-home"></i> Dashboard <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="index.html">Dashboard Alpha</a></li>
                        <li><a href="index-beta.html">Dashboard beta</a></li>

                    </ul>
                </li>
                <li><a href="widgets.html"><i class="fa fa-diamond"></i> Widgets </a></li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-handbag"></i> E-commerce <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="ecommerce-dashboard.jsp">Dashboard</a></li>
                        <li><a href="ecommerce-products.jsp">products</a></li>
                        <li><a href="ecommerce-orders.jsp">orders</a></li>
                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-envelope-letter"></i> Mail <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="mail-index.html">Inbox</a></li>
                        <li><a href="mail-view.html">Inbox view</a></li>
                        <li><a href="mail-compose.html">Compose</a></li>
                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-grid"></i> Layouts <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="layout-sidebar-topbar-dark.html">Sidebar +Topbar Dark</a></li>
                        <li><a href="layout-sidebar-colored.html">Sidebar Colored</a></li>
                        <li><a href="layout-horizontal.html">Horizontal</a></li>

                        <li><a href="layout-dashboard-only.html">Dashboard Only</a></li>
                    </ul>
                </li>
                <li class="nav-heading"><span>Components</span></li>
                <li><a href="jquery-ui-elements.html"><i class="icon-wrench"></i> Jquery UI Elements</a></li>
                <li class="active">
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-settings"></i> UI elements <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="false" class="nav-second-level nav">
                        <li><a href="ui-typography.html">Typography</a></li>
                        <li><a href="ui-icons.html">Icons</a></li>
                        <li><a href="ui-panels.html">Panels</a></li>
                        <li><a href="ui-buttons.html">Buttons</a></li>
                        <li><a href="ui-tabs.html">tabs</a></li>
                        <li><a href="ui-tip-pop.html">Tooltip & Popovers</a></li>
                        <li><a href="ui-alerts.html">Alerts</a></li>
                        <li><a href="ui-modals.html">modals</a></li>
                        <li><a href="ui-grid.html">grid system</a></li>
                        <li><a href="ui-carousel.html">Carousel</a></li>
                        <li><a href="ui-sweetalerts.html">Sweet alters</a></li>
                        <li><a href="ui-alertify.html">Alertify Alters</a></li>
                        <li><a href="ui-sliders.html">Sliders</a></li>
                        <li><a href="ui-nestable.html">Nestable</a></li>
                        <li><a href="ui-date-time-picker.html">Date time pickers</a></li>
                        <li><a href="ui-treeview.html">Tree view</a></li>
                        <li><a href="ui-draggable-panels.html">Draggable Panels</a></li>
                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-pencil"></i> Forms <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="form-basic.html">Basic elements</a></li>
                        <li><a href="form-file-upload.html">File upload</a></li>
                        <li><a href="form-editor.html">text editor</a></li>
                        <li><a href="form-wizard.html">Form Wizard</a></li>
                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-bar-chart"></i> Charts <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="chart-flot.html">Flot</a></li>
                        <li><a href="chart-morris.html">Morris</a></li>
                        <li><a href="chart-radial.html">Radial</a></li>
                        <li><a href="chart-c3.html">C3</a></li>
                        <li><a href="chart-sparkline.html">Sparkline</a></li>
                        <li><a href="chart-rickshaw.html">rickshaw</a></li>
                        <li><a href="chart-chartjs.html">ChartJs</a></li>
                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-list"></i> Tables <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="table-basic.html">Basic tables</a></li>
                        <li><a href="table-data.html">Data tables</a></li>
                        <li><a href="table-foo.html">Foo tables</a></li>

                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-map"></i> Maps <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="map-vector.html">Vector map</a></li>
                        <li><a href="map-google.html">Google map</a></li>
                    </ul>
                </li>
                <li class="nav-heading"><span>More</span></li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-folder"></i> Pages <span
                            class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="page-empty.html">Empty page</a></li>
                        <li><a href="page-lockscreen.html">Lock-screen</a></li>
                        <li><a href="../../page-login.jsp">Login</a></li>
                        <li><a href="page-register.html">Register</a></li>
                        <li><a href="page-forget-password.html">Forget Password</a></li>
                        <li><a href="../../404.jsp">404</a></li>
                        <li><a href="page-gallery.html">Gallery</a></li>
                        <li><a href="page-timeline.html">Timeline</a></li>
                        <li><a href="page-invoice.html">Invoice</a></li>
                        <li><a href="page-profile.html">Profile</a></li>
                        <li><a href="page-calendar.html">Calendar</a></li>
                        <li><a href="page-chat-room.html">Chat room</a></li>
                        <li><a href="page-faqs.html">Faqs</a></li>
                        <li><a href="page-pricing.html">Pricing</a></li>
                        <li><a href="page-contacts.html">Contacts</a></li>
                        <li><a href="page-blog.html">Blog</a></li>
                        <li><a href="page-blog-article.html">Blog article</a></li>

                    </ul>
                </li>
                <li>
                    <a aria-expanded="true" href="javascript: void(0);"><i class="icon-folder-alt"></i> Nested menu
                        <span class="fa arrow"></span></a>
                    <ul aria-expanded="true" class="nav-second-level nav">
                        <li><a href="javascript: void(0);">Level 1</a></li>
                        <li><a aria-expanded="true" href="javascript: void(0);">Level 2 <span
                                class="fa arrow"></span></a>
                            <ul aria-expanded="true" class="nav-third-level nav">
                                <li><a href="javascript: void(0);">Level 2</a></li>
                                <li><a href="javascript: void(0);">Level 2</a></li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <!--<li><a href="landing/home.html" target="_blank" class="bg-primary"><i class="icon-star"></i>Landing page</a></li>-->
            </ul>
        </div><!--nano content-->
    </div><!--nano scroll end-->
</aside>
<!--left navigation end-->


<!--main content start-->
<section class="main-content">

    <!--page header start-->
    <div class="page-header">
        <div class="row">
            <div class="col-sm-6">
                <h4>Buttons</h4>
            </div>
            <div class="col-sm-6 text-right">
                <ol class="breadcrumb">
                    <li><a href="javascript: void(0);"><i class="fa fa-home"></i></a></li>
                    <li>UI Elements</li>
                    <li>Buttons</li>
                </ol>
            </div>
        </div>
    </div>
    <!--page header end-->


    <!--start page content-->
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Default Buttons
                </div>
                <div class="panel-body">
                    <p class="text-muted margin-b-10">classes <code>btn btn-default</code> for create a default btn.</p>
                    <div class="buttons">
                        <a class="btn btn-default" href="javascript: void(0);">Default</a>
                        <a class="btn btn-primary" href="javascript: void(0);">Primary</a>
                        <a class="btn btn-indigo" href="javascript: void(0);">indigo</a>
                        <a class="btn btn-teal" href="javascript: void(0);">teal</a>
                        <a class="btn btn-success" href="javascript: void(0);">Success</a>
                        <a class="btn btn-info" href="javascript: void(0);">Info</a>
                        <a class="btn btn-danger" href="javascript: void(0);">Danger</a>
                        <a class="btn btn-warning" href="javascript: void(0);">Warning</a>
                    </div>
                </div>
            </div>
        </div><!--col-md-6-->
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Border Buttons
                </div>
                <div class="panel-body">
                    <p class="text-muted margin-b-10">classes <code>btn btn-default btn-border</code> for create a
                        border btn.</p>
                    <div class="buttons">
                        <a class="btn btn-default btn-border" href="javascript: void(0);">Default</a>
                        <a class="btn btn-primary btn-border" href="javascript: void(0);">Primary</a>
                        <a class="btn btn-indigo btn-border" href="javascript: void(0);">indigo</a>
                        <a class="btn btn-teal btn-border" href="javascript: void(0);">teal</a>
                        <a class="btn btn-success btn-border" href="javascript: void(0);">Success</a>
                        <a class="btn btn-info btn-border" href="javascript: void(0);">Info</a>
                        <a class="btn btn-danger btn-border" href="javascript: void(0);">Danger</a>
                        <a class="btn btn-warning btn-border" href="javascript: void(0);">Warning</a>
                    </div>
                </div>
            </div>
        </div><!--col-md-6-->
    </div><!--end row-->

    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Size Buttons
                </div>
                <div class="panel-body">
                    <p class="text-muted margin-b-10">classes <code>btn btn-default btn-xs</code> for create a fill size
                        btn.</p>
                    <div class="buttons margin-b-20">
                        <a class="btn btn-primary btn-xs" href="javascript: void(0);">Small</a>
                        <a class="btn btn-primary btn-sm" href="javascript: void(0);">Medium</a>
                        <a class="btn btn-primary " href="javascript: void(0);">Default</a>
                        <a class="btn btn-primary btn-lg " href="javascript: void(0);">Large</a>
                    </div>
                    <p class="text-muted margin-b-10">classes <code>btn btn-default btn-border btn-xs</code> for create
                        a border size btn.</p>
                    <div class="buttons margin-b-20">
                        <a class="btn btn-primary btn-border btn-xs" href="javascript: void(0);">Small</a>
                        <a class="btn btn-primary btn-border btn-sm" href="javascript: void(0);">Medium</a>
                        <a class="btn btn-primary btn-border " href="javascript: void(0);">Default</a>
                        <a class="btn btn-primary btn-border btn-lg " href="javascript: void(0);">Large</a>
                    </div>
                    <div class="buttons">
                        <p class="text-muted margin-b-10">classes <code>btn btn-default btn-border btn-rounded
                            btn-xs</code> for create a border rounded size btn.</p>
                        <a class="btn btn-primary btn-rounded btn-border btn-xs" href="javascript: void(0);">Small</a>
                        <a class="btn btn-primary btn-rounded btn-border btn-sm" href="javascript: void(0);">Medium</a>
                        <a class="btn btn-primary btn-rounded btn-border " href="javascript: void(0);">Default</a>
                        <a class="btn btn-primary btn-rounded btn-border btn-lg " href="javascript: void(0);">Large</a>
                    </div>
                </div>
            </div>
        </div><!--col-md-6-->
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Rounded Buttons
                </div>
                <div class="panel-body">
                    <p class="text-muted margin-b-10">classes <code>btn btn-default btn-rounded</code> for create a
                        rounded btn.</p>
                    <div class="buttons margin-b-20">
                        <a class="btn btn-default btn-rounded" href="javascript: void(0);">Default</a>
                        <a class="btn btn-primary btn-rounded" href="javascript: void(0);">Primary</a>
                        <a class="btn btn-indigo btn-rounded" href="javascript: void(0);">indigo</a>
                        <a class="btn btn-teal btn-rounded" href="javascript: void(0);">teal</a>
                        <a class="btn btn-success btn-rounded" href="javascript: void(0);">Success</a>
                        <a class="btn btn-info btn-rounded" href="javascript: void(0);">Info</a>
                        <a class="btn btn-danger btn-rounded" href="javascript: void(0);">Danger</a>
                        <a class="btn btn-warning btn-rounded" href="javascript: void(0);">Warning</a>
                    </div>
                    <div class="buttons">
                        <p class="text-muted margin-b-10">classes <code>btn btn-default btn-border btn-rounded</code>
                            for create a border rounded btn.</p>
                        <a class="btn btn-default btn-border btn-rounded" href="javascript: void(0);">Default</a>
                        <a class="btn btn-primary btn-border btn-rounded" href="javascript: void(0);">Primary</a>
                        <a class="btn btn-indigo btn-border btn-rounded" href="javascript: void(0);">indigo</a>
                        <a class="btn btn-teal btn-border btn-rounded" href="javascript: void(0);">teal</a>
                        <a class="btn btn-success btn-border btn-rounded" href="javascript: void(0);">Success</a>
                        <a class="btn btn-info btn-border btn-rounded" href="javascript: void(0);">Info</a>
                        <a class="btn btn-danger btn-border btn-rounded" href="javascript: void(0);">Danger</a>
                        <a class="btn btn-warning btn-border btn-rounded" href="javascript: void(0);">Warning</a>
                    </div>
                </div>
            </div>
        </div><!--col-md-6-->
    </div><!--end row-->
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Dropdown Buttons
                </div>
                <div class="panel-body">
                    <p class="text-muted margin-b-10">Add dropdown-menu ul list into <code>btn-group</code></p>
                    <div class="buttons">
                        <div class="btn-group">
                            <button aria-expanded="false" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                    type="button">Dropdown <span class="caret"></span></button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                        <div class="btn-group">
                            <button aria-expanded="false" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
                                    type="button">Dropdown <span class="caret"></span></button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                        <div class="btn-group">
                            <button aria-expanded="false" class="btn btn-success dropdown-toggle" data-toggle="dropdown"
                                    type="button">Dropdown <span class="caret"></span></button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                        <div class="btn-group">
                            <button aria-expanded="false" class="btn btn-teal dropdown-toggle" data-toggle="dropdown"
                                    type="button">Dropdown <span class="caret"></span></button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--col-md-6-->
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Dropup buttons
                </div>
                <div class="panel-body">
                    <p class="text-muted margin-b-10">Add class <code>.dropup</code> into btn-group for dropup </p>
                    <div class="buttons">
                        <div class="btn-group dropup">
                            <button aria-expanded="false" class="btn btn-default dropdown-toggle" data-toggle="dropdown"
                                    type="button">Dropdown <span class="caret"></span></button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                        <div class="btn-group dropup">
                            <button aria-expanded="false" class="btn btn-primary dropdown-toggle" data-toggle="dropdown"
                                    type="button">Dropdown <span class="caret"></span></button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                        <div class="btn-group dropup">
                            <button aria-expanded="false" class="btn btn-success dropdown-toggle" data-toggle="dropdown"
                                    type="button">Dropdown <span class="caret"></span></button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                        <div class="btn-group dropup">
                            <button aria-expanded="false" class="btn btn-teal dropdown-toggle" data-toggle="dropdown"
                                    type="button">Dropdown <span class="caret"></span></button>
                            <ul class="dropdown-menu" role="menu">
                                <li><a href="#">Action</a></li>
                                <li><a href="#">Another action</a></li>
                                <li><a href="#">Something else here</a></li>
                                <li class="divider"></li>
                                <li><a href="#">Separated link</a></li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div><!--col-md-6-->
    </div><!--end row-->
    <div class="row">
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Icon Buttons
                </div>
                <div class="panel-body">
                    <p class="text-muted margin-b-10">Classes <code>btn btn-default btn-icon</code> and add icon into i
                        tag before text</p>
                    <div class="buttons margin-b-10">
                        <a class="btn btn-primary btn-icon" href="javascript: void(0);"><i
                                class="fa fa-cloud-download"></i> Download</a>
                        <a class="btn btn-success btn-icon" href="javascript: void(0);"><i class="fa fa-user"></i> Login</a>
                        <a class="btn btn-danger btn-icon" href="javascript: void(0);"><i class="fa fa-times"></i>
                            Danger</a>
                        <a class="btn btn-warning btn-icon" href="javascript: void(0);"><i class="fa fa-warning"></i>
                            Warning</a>
                    </div>
                    <div class="buttons margin-b-20">
                        <a class="btn btn-primary btn-rounded btn-icon" href="javascript: void(0);"><i
                                class="fa fa-cloud-download"></i> Download</a>
                        <a class="btn btn-success btn-rounded btn-icon" href="javascript: void(0);"><i
                                class="fa fa-user"></i> Login</a>
                        <a class="btn btn-danger btn-rounded btn-icon" href="javascript: void(0);"><i
                                class="fa fa-times"></i> Danger</a>
                        <a class="btn btn-warning btn-rounded btn-icon" href="javascript: void(0);"><i
                                class="fa fa-warning"></i> Warning</a>
                    </div>
                    <div class="buttons">
                        <p>File upload button</p>
                        <div class="fileupload btn btn-primary btn-icon margin-r-5">
                            <i class="fa fa-cloud-upload"></i> <span>Upload</span>
                            <input class="upload" type="file">
                        </div>
                        <div class="fileupload btn btn-success btn-rounded btn-icon">
                            <i class="fa fa-cloud-upload"></i> <span>Upload</span>
                            <input class="upload" type="file">
                        </div>
                    </div>
                </div>
            </div>
        </div><!--col-md-6-->
        <div class="col-md-6">
            <div class="panel panel-default">
                <div class="panel-heading">
                    Social buttons
                </div>
                <div class="panel-body">
                    <p class="text-muted margin-b-10">Example <code>btn btn-facebook</code></p>
                    <div class="buttons margin-b-10">
                        <a class="btn btn-facebook" href="javascript: void(0);"><i class="fa fa-facebook"></i></a>
                        <a class="btn btn-twitter" href="javascript: void(0);"><i class="fa fa-twitter"></i></a>
                        <a class="btn btn-googleplus" href="javascript: void(0);"><i class="fa fa-google-plus"></i></a>
                        <a class="btn btn-pinterest" href="javascript: void(0);"><i class="fa fa-pinterest"></i></a>
                        <a class="btn btn-linkedin" href="javascript: void(0);"><i class="fa fa-linkedin"></i></a>
                        <a class="btn btn-youtube" href="javascript: void(0);"><i class="fa fa-youtube"></i></a>
                        <a class="btn btn-dribbble" href="javascript: void(0);"><i class="fa fa-dribbble"></i></a>
                        <a class="btn btn-github" href="javascript: void(0);"><i class="fa fa-github"></i></a>
                        <a class="btn btn-skype" href="javascript: void(0);"><i class="fa fa-skype"></i></a>
                    </div>
                    <div class="buttons margin-b-10">
                        <a class="btn btn-facebook" href="javascript: void(0);"><i
                                class="fa fa-facebook margin-r-5"></i> facebook</a>
                        <a class="btn btn-twitter" href="javascript: void(0);"><i class="fa fa-twitter margin-r-5"></i>
                            twitter</a>
                        <a class="btn btn-googleplus" href="javascript: void(0);"><i
                                class="fa fa-google-plus margin-r-5"></i> google plus</a>
                        <a class="btn btn-pinterest" href="javascript: void(0);"><i
                                class="fa fa-pinterest margin-r-5"></i> pinterest</a>
                        <a class="btn btn-linkedin" href="javascript: void(0);"><i
                                class="fa fa-linkedin margin-r-5"></i> linkedin</a>
                        <a class="btn btn-youtube" href="javascript: void(0);"><i class="fa fa-youtube margin-r-5"></i>
                            youtube</a>
                        <a class="btn btn-dribbble" href="javascript: void(0);"><i
                                class="fa fa-dribbble margin-r-5"></i> dribbble</a>
                        <a class="btn btn-github" href="javascript: void(0);"><i class="fa fa-github margin-r-5"></i>
                            github</a>
                        <a class="btn btn-skype" href="javascript: void(0);"><i class="fa fa-skype margin-r-5"></i>
                            skype</a>
                    </div>
                </div>
            </div>
        </div><!--col-md-6-->
    </div><!--end row-->


    <!--end page content-->


    <!--Start footer-->
    <footer class="footer">
        <span>Copyright &copy; 2016. Float</span>
    </footer>
    <!--end footer-->

</section>
<!--end main content-->


<!--Common plugins-->
<script src="../../static/js/jquery.min.js"></script>
<script src="../../static/js/bootstrap.min.js"></script>
<script src="../../static/js/pace.min.js"></script>
<script src="../../static/js/jasny-bootstrap.min.js"></script>
<script src="../../static/js/jquery.slimscroll.min.js"></script>
<script src="../../static/js/jquery.nanoscroller.min.js"></script>
<script src="../../static/js/metismenu.min.js"></script>
<script src="../../static/js/float-custom.js"></script>
</body>
</html>